<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script> 
    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 250px;
      }
      #panTo{
        text-align:center;
      }
    </style>
    
    <script type="text/javascript">
      
      $(function(){
      
        $('#test1').gmap3(
          { action: 'init',
            center:{
                lat:44.797916, 
                lng:-93.278046
            },
            onces: {
              bounds_changed: function(){
                $(this).gmap3({
                  action:'getBounds', 
                  callback: function (bounds){
                    if (!bounds) return;
                  	var southWest = bounds.getSouthWest(),
                        northEast = bounds.getNorthEast(),
                        lngSpan = northEast.lng() - southWest.lng(),
                        latSpan = northEast.lat() - southWest.lat(),
                        i;
                  	for (i = 0; i < 10; i++) {
                      add($(this), i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
                    }
                  }
                });
              }
            }
          }
        );
        
      });
      
      function add($this, i, lat, lng){
        $this.gmap3(
        { action: 'addMarker',
          latLng: [lat, lng],
          callback: function(marker){
            var $button = $('<span id="button-'+i+'"> ['+i+'] </span>');
            $button
              .click(function(){    
                  $this.gmap3({
                    action:'panTo', 
                    args:[marker.position]
                  });
              })
              .css('cursor','pointer');
            $('#panTo').append($button);
          }
        },
        { action:'addOverlay',
          latLng: [lat, lng],
          options:{
            content: '<div style="border:1px solid #FF0000; background-color: #00FF00; width:50px; height: 20px; text-align:center">'+i+'</div>',
            offset:{
              y:-32,
              x:12
            }
          },
          events:{
            mouseover: function(overlay){
              $(overlay.getDOMElement()).children().css('backgroundColor', '#0000FF');
            },
            mouseout: function(overlay){
              $(overlay.getDOMElement()).children().css('backgroundColor', '#00FF00');
            }
          }
        });
      }
    </script>       
  </head>
    
  <body>
    <div id="panTo"></div>
    <div id="test1" class="gmap3"></div>
  </body>
</html>